<template>
	<view class="wdthdrawal">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="right">
				<view class="select">
					<uni-data-select v-model="selectTimeVal2" :localdata="range2" @change="changeDateSelect2"></uni-data-select>
				</view>
				<view class="select">
					<!-- <uni-data-select v-model="selectTimeVal" :localdata="range" @change="changeDateSelect"></uni-data-select> -->
					<uni-data-picker placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
						@change="onchange" :clear-icon="false" >
					</uni-data-picker>
				</view>
				<view class="" style="display: flex;width:400px;">
					<uni-easyinput errorMessage v-model="searchVal" placeholder="搜索内容(可搜:店名,店联系方式)"></uni-easyinput>
					<button @click="eventSearch" size="mini" plain style="margin:5rpx 10rpx;">搜索</button>
				</view>
			</view>
		</view>
		<view class="warn">
			<text>
				<text>{{range2[selectTimeVal2].text}}商铺 ：</text>
			</text>
			<text style="color:#ff6600;font-weight:bold">{{total}} </text>
			<text> 家</text>
		</view>
		<view class="table">
			<uni-table ref="table" :loading="loading" :emptyText="data.length || '没有更多数据'" stripe type="selection"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">
						商铺logo
					</uni-th>
					<uni-th align="center">商铺名称</uni-th>
					<uni-th align="center">
						商铺负责人
					</uni-th>
					<uni-th align="center"  >
						联系方式
					</uni-th>

					<uni-th align="center">
						营业状态
					</uni-th>
					<uni-th align="center">
						金额
					</uni-th>
					<uni-th align="center">
						可提现金额
					</uni-th>

					<uni-th align="center">
						佣金抽成
					</uni-th>
					<uni-th align="center">
						创建时间
					</uni-th>
					<uni-th  align="center" width="490" >操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in data" :key="index" class="hoverBak">
					<!-- logo -->
					<uni-td align="center">
						<image v-if="item.logo" :src="item.logo.url+'?x-oss-process=image/resize,m_fixed,h_100,w_100'"
							mode="widthFix" style="width:70rpx;height:70rpx;border-radius:5px"></image>
					</uni-td>
					<!-- title -->
					<uni-td align="center">
						<view class="titleApp" 
							@click="goUrl('/pages/shop/shop/shop-info-detail?shop_id='+item._id._value)" 
							style="cursor:pointer"
						>
							<!-- item.title内容数据(可循环)  searchVal搜索文本 -->
							<heightText :textContetn="item.title" :text-title="searchVal" ></heightText>
						</view>
					</uni-td>
					<uni-td align="center">
						{{item._id.shop_authentication[0].legal_person_name}}
					</uni-td>
					<!-- title -->
					<uni-td align="center">
						<view class="titleApp">
							<heightText :textContetn="initMobile(item.tel)" :text-title="searchVal" ></heightText>
						</view>
					</uni-td>

					<uni-td align="center" width="150" >
						<view class="" :style="`color:${item.disabled_status?item.business_status?'#00b894':'#7f8c8d' :'#ff7675'}`">
							<text v-if="item.pause_duration > Date.now()"  >
								<uni-dateformat
									:date="item.pause_duration" format="MM月dd日"
								></uni-dateformat>
								<text>后营业</text>
							</text>
							<text v-else >{{item.disabled_status? item.business_status?'正常营业':'暂停营业'  :'禁止营业' }}</text>
						</view>
					</uni-td>
					<uni-td align="center">
						<text class="fontColorApp">
							￥{{(item.money < 0 ? 0 :item.money/100).toFixed(2)}}
						</text>
					</uni-td>
					<uni-td align="center">
						<text class="fontColorApp">
							￥{{(item.withdrawable_money ?  item.withdrawable_money/100 :0   ).toFixed(2)}}
						</text>
					</uni-td>
					<uni-td align="center">
						{{item.commission_rate?item.commission_rate/10+'%':'暂未设置'}}
					</uni-td>
					<!-- 创建时间 -->
					<uni-td align="center">
						<uni-dateformat :date="item.create_time?item.create_time:''" format="MM月dd日 hh:mm" ></uni-dateformat>
					</uni-td>
					<!-- 设置 -->
					<uni-td align="center" >
						<view class="">
							<button size="mini" @click="goUrl('/pages/shop/shop/list?_uid='+item._id._value)"  style="margin:0 5px" >
								店铺信息
							</button>
							<button size="mini" @click="goUrl('/pages/order/orders/orders?_uid='+item._id._value)"
								type="primary" >
								相关订单
							</button>
							<button size="mini" @click="goUrl('/pages/shop/shop_bill/list?_uid='+item._id._value)" style="margin:0 5px" type="primary" >
								商铺账单
							</button>
							
							<button size="mini" @click="goUrl('/pages/log/comment/list?_uid='+item._id._value)" type=" " style="margin:0 5px">
								商铺评价
							</button>
							
							<button size="mini" @click="goUrl('/pages/notice/shop/add?_uid='+item._id._value)" >
								发送通知
							</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

		</view>
		<view class="uni-pagination-box">
			<uni-pagination @change="enventFneye" :v-model="currentPage" :pageSize="limit" title=""
				:total="total"></uni-pagination>
		</view>

	</view>
</template>

<script>
	import Util from "@/js_sdk/validator/util.js"
	import { areaPower,getArea  } from "@/js_sdk/manage-area/manage.js";
	const db = uniCloud.database()
	const global = uniCloud.importObject("global")
	let dayDate;
	export default {
		data() {
			return {
				loading: true,
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "店铺管理" },
					{to: "",name: "商铺信息" }
				],
				// 分页
				total: 0, //  总条数
				skip: 0, // 开始查询位置
				limit: 20, // 单词查询条数
				currentPage: 1, // 当前页
				//搜索框
				searchVal: '',
				//a 日期下拉框
				selectTimeVal: 0,
				selectTimeVal2: 0,
				queryCondition: {},
				// 级联菜单
				dataTree:[],
				range2: [
					{"value": 0,"text": "正式开业"},
					{"value": 1,"text": "在营业中"},
					{"value": 2,"text": "暂停营业"},
					{"value": 3,"text": "禁止营业"}
				],
				data: []
			}
		},
		onLoad(e) {
			
			this.queryCondition = {
				"_id.shop_authentication": {$size: 1},
				"area_all.value":db.command.in(areaPower()),
				$or: [],
			};
			// e._uid 必须是商铺id或者创建人id(用户表id)
			if (e._uid) {
				this.queryCondition.$or.push({"_id._value": e._uid});
				this.queryCondition.$or.push({create_uid: e._uid});
				this.getExamineData()
			} else {
				this.queryCondition.$or.push({});
				this.getExamineData()
			}
			this.getArea()
		},
		methods: {
			// 获取地址
			async getArea(){
				this.dataTree = getArea()
			},
			// 级联菜单
			onchange(e){
				this.queryCondition["area_all.value"] =  e.detail.value[0].value
				this.getExamineData()
			},
			getExamineData() {
				this.loading = true
				let shopField = "_id,goods,categories,area,area_all,pause_duration,commission_rate,disabled_status,business_status,intro,title,logo,address,create_time,money,withdrawable_money,create_uid,categories,money,poiname,business_status,withdrawable_money,tel,create_time,start_business_hours1,end_business_hours1,start_business_hours2,end_business_hours2"
				let authentcationField = "permit_photo,legal_person_card_photo_f,legal_person_card_photo_z,business_license_address,business_license_number,legal_person_card,legal_person_card_photo_z,shop_id,user_id,business_license_title,legal_person_name,legal_person_card"
				let shopData = db.collection("shop").field(shopField).getTemp({getOne: false})
				let authenticationData = db.collection("shop_authentication").field(authentcationField).getTemp({getOne: true})
				db.collection(shopData, authenticationData).where(this.queryCondition).orderBy("create_time desc").skip(this.skip).limit(this.limit)
				.get({getOne: false,getCount: true,customUI: true}).then(res => {
					// let money = 0 ;
					//  res.result.data.map(item => {
					// 	return money += parseInt((item.money/100).toFixed(0))
					// })
					// console.log(money);
					this.data = res.result.data
					this.total = res.result.count
					this.loading = false
				})
			},
			// 分页
			enventFneye(val) {
				this.loading = true
				this.skip = (val.current - 1) * 20
				this.getExamineData()
			},
			// 下拉框
			changeDateSelect(e) {
				this.searchVal = e
				this.eventSearch()
			},
			changeDateSelect2(_value) {
				switch (_value) {
					case 1:
						this.queryCondition.business_status = true
						this.queryCondition.disabled_status = true
						break;
					case 2:
						this.queryCondition.business_status = false
						this.queryCondition.disabled_status = true
						break;
					case 3:
						this.queryCondition.disabled_status = false
						break;
					default:
						delete this.queryCondition.business_status;
						delete this.queryCondition.disabled_status;
						break;
				}
				this.getExamineData()
			},
			// 搜索
			eventSearch() {
				this.loading = true
				let nameVal = this.searchVal
				// 合并查询条件
				let MergeWhere = {
					"_id.shop_authentication": {
						$size: 1
					},
					"area_all.value":db.command.in(areaPower()),
					"business_status": this.queryCondition.business_status,
					"disabled_status": this.queryCondition.disabled_status
				};
				if (this.selectTimeVal === 0) {
					delete MergeWhere.business_status
					delete MergeWhere.disabled_status
				}
				// 构建搜索条件
				let search = {
					$or: [
						{'title': {$regex: '.*' + nameVal + '.*',$options: 'i' } 	}, 
						{ 'tel': {$regex: '.*' + nameVal + '.*',$options: 'i'} }
					]
				};
				// Object.assign(query, search); // 将搜索条件合并到查询对象中
				this.queryCondition = Object.assign(MergeWhere, search)
				this.getExamineData()
			},
			/**
			 * 获取指定日期的开始和结束时间戳
			 * @returns {Object} - 返回包含开始时间戳和结束时间戳的对象
			 */
			getStartAndEndTimestamp() {
				const date = new Date();
				const sevenDaysAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
				const startTime = sevenDaysAgo.setHours(0, 0, 0, 0); // 将指定日期设置为零点，返回开始时间戳
				const endTime = date.setHours(23, 59, 59, 999); // 将指定日期设置为当天的结束，返回结束时间戳
				return {
					startTime: startTime,
					endTime: endTime
				};
			},
			navigateTo(url, clear) {
				// clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData(clear)
						}
					}
				})
			},
			initMobile(mobile) {
				return Util.formatPhoneNumber(mobile)
			},
			goUrl(Url) {
				uni.navigateTo({
					url: Url
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.hoverBak {}

	.select {
		width: 500rpx;
		margin: 0 20rpx;
	}

	.pagetitle {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			display: flex;
		}
	}

	.warn {
		padding: 10rpx;
	}

	.item {
		padding: 10rpx;
		margin: 0rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.items {
			flex: 1;
			text-align: center;
		}
	}

	.title {
		font-size: 16px;
		font-weight: bold;
	}

	.table {
		margin: 50rpx 20rpx;
		border: 1px solid #eee;
		border-bottom: none
	}

	.wdthdrawal {
		padding: 20rpx;
		font-size: 14px;
	}
</style>